<template>
    <div>
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title">行动记录</h1>
                <span>/ 每天和客户有关的销售和服务工作</span>
            </el-col>
        </el-row>
        <el-row class="nav">
            <el-col>
                <div class="nav-item">
                    <el-button type="text" @click="addRecordDialogVisible = true" style="color: #333333">
                        <i class="iconfont icon-qianbi icon-sty"></i>新增
                    </el-button>
                </div>
                <div class="nav-item">
                    <download-excel :data="allActrecord" :fields="excelFields" name="行动记录列表.xls" type="xls">
                        <el-button type="text">
                            <i class="iconfont icon-excel">导出Excel</i>
                        </el-button>
                    </download-excel>
                </div>
                <div class="nav-item itemselect_size">
                    <el-select v-model="value" placeholder="请选择" size="mini" style="width:100px">
                        <el-option
                                v-for="item in actdate_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                style="font-size: 1px">
                        </el-option>
                    </el-select>
                </div>
                <div class="nav-item" :class="[value == 10?'':'is_show']">
                    <el-date-picker
                            v-model="value1"
                            type="daterange"
                            format="yyyy-MM-dd"
                            style="width: 200px"
                            size="mini">
                    </el-date-picker>
                </div>
                <el-form style="display:inline-block">
                    <div class="nav-item" style="border:none">
                        <el-input v-model="search"></el-input>
                    </div>
                    <div style="display:inline-block">
                        <el-button @click="searchOppo">搜索</el-button>
                    </div>
                </el-form>
            </el-col>
        </el-row>
        <div class="content" v-loading="loading">
            <el-tabs v-model="actreName" type="border-card" @tab-click="change_tab">
                <!--                销售机会的全部数据-->
                <el-tab-pane label="全部" name="first" state="0">
                    <actrecord-table :actrecord="actrecord" :acttype="actType"></actrecord-table>
                </el-tab-pane>

                <el-tab-pane v-for="index in actType" :key="index.actionTypeId" :label="index.actionTypeName" :name="index.actionTypeId+''" :state="index.actionTypeId">
                    <actrecord-table :actrecord="actrecord" :acttype="actType"></actrecord-table>
                </el-tab-pane>

                <el-pagination
                        background
                        :current-page.sync="currPage"
                        :page-size="pageSize"
                        @current-change="changge_page"
                        layout="total, prev, pager, next"
                        :total="total">
                </el-pagination>
            </el-tabs>
        </div>
        <el-dialog
                title="行动流程记录"
                :visible.sync="seeDetailRecordDialogVisible"
                width="50%">
            <act-flow :action="action"></act-flow>
        </el-dialog>
        <el-dialog
                title="行动记录"
                :visible.sync="addRecordDialogVisible"
                width="65%"
                destroy-on-close>
            <add-actform ref="refSaveAction"></add-actform>
        </el-dialog>
    </div>
</template>

<script>
    import {formatTimeToStr} from '@/assets/format.js'
    export default {
        name: "actrecord",
        components:{
            'actrecord-table': resolve => require(["./actrecord_table"],resolve),
            'act-flow': resolve => require(["./act-flow"],resolve),
            'add-actform': resolve => require(["./add-actform"],resolve),
        },
        data:function(){
            return{
                actdate_options:[
                    { value: 1, label: '行动日期' },
                    { value: 2, label: '今天' },
                    { value: 3, label: '昨天' },
                    { value: 4, label: '本周' },
                    { value: 5, label: '上周' },
                    { value: 6, label: '本月' },
                    { value: 7, label: '上月' },
                    { value: 8, label: '今年' },
                    { value: 9, label: '去年' },
                    { value: 10, label: '自定义' },
                    ],
                //行动日期的下拉框
                value:1,
                //自定义时间的
                value1:[new Date(),new Date()],
                actreName:"first",
                loading:true,           //taps导航标识
                actType:[],             //行动类别
                state:0,                 //类型
                search:"",              //搜索条件
                actrecord:[],           //行动记录数据源
                action:"",              //行动记录对象
                total:0,
                currPage:1,
                pageSize:6,
                seeDetailRecordDialogVisible:false,
                addRecordDialogVisible:false,
                selectDate:null,
                startDate:formatTimeToStr(new Date(), "yyyy-MM-dd"),
                endDate:formatTimeToStr(new Date(), "yyyy-MM-dd"),
                allActrecord:[],             //用于打印的数据
                excelFields: {			// excel对应关系
                    "员工": "emp.empName",
                    "客户": "customer.customerName",		// 支持嵌套属性
                    "联系人": "contact.contactName",
                    "行动类型": "actionType.actionTypeName",
                    "行动时间": {
                        field: "actionDate",
                        callback: value => {		// 通过回调函数格式化日期
                            return formatTimeToStr(value, "yyyy-MM-dd")
                        }
                    },
                    "下次是否联系": {
                        field: "isContact",
                        callback: value => {
                            if(value === 1){
                                return ("是")
                            }
                            return ("否")
                        }
                    },
                    "下次联系时间": {
                        field: "nextContactTime",
                        callback: value => {
                            if(value != null){
                                return formatTimeToStr(value, "yyyy-MM-dd")
                            }
                            return null;
                        }
                    },
                    "客户行为": {
                        field: "behaviorRecordList",
                        callback: value => {
                            let behavior = ""
                            value.forEach(pl => {
                                let p = pl.behavior.behaviorName
                                behavior += p + " | "
                            })
                            return behavior.substring(0, behavior.length - 1)
                        }
                    },
                }
            }
        },
        methods:{
            //获取行动类别
            get_actiontype(){
                this.axios.get("api/actrecord/getactType")
                .then(res=>{
                    this.actType = res.data
                    this.get_actRecord(this.currPage,0,this.search)
                })
                .catch(()=>{
                    this.loading = false
                    this.global.mes_error("获取行动类别失败！")
                })
            },
            //获取行动数据
            get_actRecord(currPage,state,search){
              this.axios.get("api/actrecord/act",{params:{"currPage":currPage,"pageSize":this.pageSize,"type":state,"search":search,
                      "value":this.value, "startDate":this.startDate,"endDate":this.endDate}})
                .then(v=>{
                    this.total = v.data.total
                    this.actrecord = v.data.data
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                    this.global.mes_error("获取行动数据失败！")
              })
            },
            /* 获取全部行动记录数据，用于导出excel */
            get_all_actionRecord(){
                this.axios.get("api/actrecord/actNoPage")
                    .then(res => {
                        window.console.log(res.data)
                        this.allActrecord = res.data
                    })
                    .catch(() => {
                        this.global.mes_error("获取数据失败！")
                    })
            },
            /* tabs导航改变事件 */
            change_tab(tab){
                this.state = tab.$attrs.state   //记录状态，分页时候
                this.get_actRecord(this.currPage,tab.$attrs.state,this.search)
            },
            /* 分页页码改变事件 */
            changge_page(){
                this.get_actRecord(this.currPage,this.state,this.search)
            },
            searchOppo(){
                if(this.value === 10){
                    this.startDate = formatTimeToStr(this.value1[0], "yyyy-MM-dd")
                    this.endDate = formatTimeToStr(this.value1[1], "yyyy-MM-dd")
                }else if(this.value != 10){
                    this.startDate = formatTimeToStr(new Date(), "yyyy-MM-dd")
                    this.endDate = formatTimeToStr(new Date(), "yyyy-MM-dd")
                }
                this.get_actRecord(this.currpage,this.state,this.search)
            }
        },
        created:function() {
            this.get_actiontype();
            this.get_all_actionRecord();
            /*初始化后，保存当前页面对象*/
            this.$store.dispatch("setVueActrecord",this);
        },

    }
</script>

<style scoped>
    *{margin: 0;padding: 0;font-size: 14px}
    .contract_main{background: #e4e7ee}
    .head{height:70px;background: #f8f6f8;line-height: 70px}
    .contract_title{display: inline-block;font-weight: unset;margin-left: 20px;padding-right: 3px;font-size: 25px}
    .el-col span{color: #b4b4bc}
    .nav {margin: 20px;background: #fcfbfd;width: 100%-40px;height:auto; min-height:55px !important;line-height: 55px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .nav .nav-item {display: inline-block;height: 45px;padding: 0px 15px;border-right: 1px solid #dcdfe6;line-height: 45px;}
    .content{margin: 20px;background: #fcfbfd;width: 100%-40px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .el-table{font-size: 5px !important;}
    .el-table .el-button{width: 30px;height: 30px}
    .el-button.is-circle{padding: 2px !important;}
    .el-tabs__header{margin-bottom: 0px !important;}
    /*自定义日期的显示按钮*/
    .is_show{display: none !important;}
</style>